<template>
  <div>

    <div>
      <el-form :inline="true" :model="keyword" ref="searchForm" class="demo-form-inline">
        <!--    上方区域-->
        <div style="margin-left: 50px;margin-top: 10px" >
          <!--  新增、删除按钮-->
          <el-form-item>
            <el-button type="primary" @click="openAddDialog" icon="el-icon-plus">新增</el-button>
            <el-button type="danger" icon="el-icon-delete" @click="delBatch">批量删除</el-button>
          </el-form-item>
        </div>

        <div  style="margin-left: 50px">
          <!--模糊查询按钮：注意这是在el-form内-->

          <span>
            <el-form-item label="优先级" prop="priority" >
            <el-radio-group clearable v-model="keyword.priority">
              <!--标签中间的是,对外展现的,label中的1是表单数据,发给后端的-->
              <el-radio label="1">紧急</el-radio>
              <el-radio label="0">正常</el-radio>
            </el-radio-group>
          </el-form-item>
          </span>
          <span style="position: relative;margin-left: 35px">
            <el-form-item label="生产订单编号" prop="produceOrderNum">
            <el-input size="small" clearable v-model="keyword.produceOrderNum" placeholder="请输入关键字"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="small" @click="search" icon="el-icon-search">查询</el-button>
            <el-button type="primary" plain size="small" @click="resetSearchForm('searchForm')" icon="el-icon-refresh">
              重置
            </el-button>
          </el-form-item>
          </span>

        </div>

      </el-form>

    </div>


    <!--添加/更新对话框-->
    <el-dialog :title="title" :visible.sync="dialogFormVisible" width="40%">
      <el-form :model="produceOrder" :rules="produceOrderRules" ref="produceOrderRulesForm">

        <h2>基本信息</h2>
        <el-form-item label="生产订单号" prop="produceOrderNum">
          <el-input v-model="produceOrder.produceOrderNum" autocomplete="off" style="width:200px"></el-input>
        </el-form-item>
        <el-form-item label="客户">
          <el-input v-model="produceOrder.client" autocomplete="off" style="width:200px"></el-input>
        </el-form-item>
        <el-form-item label="销售单号">
          <el-input v-model="produceOrder.saleOrderNum" autocomplete="off" style="width:200px"></el-input>
        </el-form-item>
        <el-form-item label="优先级" prop="priority">
          <el-radio-group v-model="produceOrder.priority">
            <!--标签中间的是,对外展现的,label中的1是表单数据,发给后端的-->
            <el-radio label="1">紧急</el-radio>
            <el-radio label="0">正常</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="produceOrder.remark" autocomplete="off" style="width:300px"></el-input>
        </el-form-item>

        <el-form-item label="产品编号">
          <el-input v-model="produceOrder.productCode" autocomplete="off" style="width:300px"></el-input>
        </el-form-item>


      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelAdd">取 消</el-button>
        <el-button type="primary" @click="addProOrd('produceOrderRulesForm')">确 定</el-button>
      </div>
    </el-dialog>


    <!--      下方表格-->
    <el-table v-loading="loading" :data="produceOrderList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column width="110" label="生产订单编号" align="center" prop="produceOrderNum"/>
      <el-table-column width="110" label="销售单号" align="center" prop="saleOrderNum"/>
      <el-table-column width="100" label="交付日期" align="center" prop="deliveryDate"/>
      <el-table-column width="110" label="优先级" align="center" prop="priority">
        <template slot-scope="scope">
          <el-tag :type="scope.row.priority == 0?'':'danger'">
            <span>{{ scope.row.priority == 1 ? '紧急' : '非紧急' }}</span></el-tag>
        </template>
      </el-table-column>
      <el-table-column width="110" label="产品编码" align="center" prop="productCode"/>
      <el-table-column width="110" label="产品名称" align="center" prop="productName"/>
      <el-table-column width="110" label="计量单位" align="center" prop="measureUnit"/>
      <el-table-column width="110" label="规格" align="center" prop="specification"/>
      <el-table-column width="110" label="计划产量" align="center" prop="planProduceNum"/>
      <el-table-column width="110" label="生产状态" align="center" prop="produceState">
        <template slot-scope="scope">
          <span>{{ scope.row.produceState == 'plan' ? '已计划' : '待计划' }}</span>
        </template>
      </el-table-column>
      <el-table-column width="100" label="已生产数量" align="center" prop="producedNum"/>
      <el-table-column width="110" label="客户" align="center" prop="client"/>
      <el-table-column width="110" label="备注" align="center" prop="remark"/>
      <el-table-column width="110" label="创建人" align="center" prop="creater"/>
      <el-table-column width="100" label="创建时间" align="center" prop="createTime"/>

      <el-table-column width="200" label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
          >编辑
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
          >作废
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 20]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>

// import {addMeasure, delBatchUnit, delMeasure, editMeasure, findPrimaryUnit, getList} from '@/api/unit'

// import produceOrder from "@/views/produce/produceOrder/index.vue";

import {addProduceOrder, delBatchOrders, delOrderByNum, editOrder, findProduct, getList} from "@/api/produceOrder";

export default {
  name: "ProduceOrder",
  // computed: {
  //   produceOrder() {
  //     return produceOrder
  //   }
  // },
  data() {
    return {
      pageNum: 1,
      pageSize: 5,
      currentPage: 1,
      total: 0,

      // 暂未用
      keyword: {
        priority:null,
        produceOrderNum:null,

      },

      multipleSelection: [],
      idList: [],

      //增加页面所用
      title: "",
      produceOrder: {
        produceOrderNum: null,
        saleOrderNum: null,
        client: null,
        priority: null,
        productCode: null,
        remark: null,


      },


      // 遮罩层
      loading: true,
      //生产订单表格数据
      produceOrderList: [],

      dialogFormVisible: false,

      produceOrderRules: {
        produceOrderNum: [
          {required: true, message: '生产订单编号不能为空', trigger: 'blur'},
        ],
        priority: [
          {required: true, message: '优先级不能为空', trigger: 'blur'},
        ],

      }

    }
  },
  methods: {
    fetchData() { // 查询数据
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        // 赋值参数 带到后端模糊查询
        priority: this.keyword.priority,
        produceOrderNum: this.keyword.produceOrderNum
      }

      getList(params).then(res => {
        let pageInfo = res.data;
        console.log("pageInfo", pageInfo)
        this.loading = false;

        console.log("pageInfo.list", pageInfo.list)
        this.produceOrderList = pageInfo.list;
        console.log("this.produceOrderList", this.produceOrderList)
        this.total = pageInfo.total
      })
    },

    // 页面大小改变时触发
    handleSizeChange(val) {
      this.pageSize = val;
      this.fetchData()
    },
    // 当前页码改变时触发
    handleCurrentChange(val) {
      this.pageNum = val;
      this.fetchData()
    },
    search() {
      this.fetchData()
    },
    resetSearchForm(formName) {
      this.$refs[formName].resetFields();
      this.fetchData()
    },

    // 多选框选中数据
    handleSelectionChange(val) {
      this.idList = [];  // 每次清空前先置空数组
      this.multipleSelection = val; // 得到选中的对象
      console.log("multipleSelection", this.multipleSelection)
      for (let i = 0; i < this.multipleSelection.length; i++) {
        this.idList.push(this.multipleSelection[i].produceOrderNum)
      }
      console.log("idList", this.idList)
    },


    addProduct() {
      this.$confirm('是否确认生产编号为' + this.produceOrder.productCode + '的产品？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        console.log("此时查询物料参数")
        // findProduct({
        //   itemTypeId: this.produceOrder.productCode // 注意此itemTypeId命名是因为后端传参名
        // })
      })
    },

    //取消添加响应
    cancelAdd() {
      this.dialogFormVisible = false;
      this.produceOrder = {
        produceOrderNum: null,
        saleOrderNum: null,
        client: null,
        priority: null,
        productCode: null,
        remark: null,
      };
      this.$message({
        type: 'info',
        message: '已取消添加',
        duration: 1000
      });
    },

    //确认添加/编辑按钮
    addProOrd(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.title == "创建生产订单") {
            // 此处执行添加...
            addProduceOrder(this.produceOrder).then(res => {
              this.$message({
                type: 'success',
                message: '创建成功!'
              });
              this.fetchData();
              this.$refs[formName].resetFields();
            })
          } else if (this.title == "编辑订单") {
            // 此处执行编辑...
            console.log(this.title)
            editOrder(this.produceOrder).then(res => {
              this.$message({
                type: 'success',
                message: '修改成功!'
              });
              this.fetchData();
              this.$refs[formName].resetFields();
            })


          }
        } else {
          console.log('error submit!!');
          return false;
        }
        this.dialogFormVisible = false;
      });
    },

    // 点击操作-编辑
    handleUpdate(row) {
      this.title = "编辑订单";
      this.dialogFormVisible = true;

      console.log("以下是handleUpdate中的row")
      console.log(row);
      this.produceOrder = row; //回显，顺便赋值

    },
    // 点击操作-删除
    handleDelete(row) {
      this.$confirm('是否删除生产订单编号为”' + row.produceOrderNum + '“的数据信息？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delOrderByNum(
          {num: row.produceOrderNum}
        ).then(res => {

          this.$message({
            type: 'success',
            message: '删除成功!',
            duration: 1000
          });
          this.fetchData()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除',
          duration: 1000
        });
      });


    },


    // 批量删除
    delBatch() {
      this.$confirm('是否确认删除单位编号为"[' + this.idList + ']"的数据项？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log("执行到批量删除前..")
        let idStr = this.idList.join(",")
        console.log("idStr为", idStr)

        delBatchOrders({
          ids: this.idList.join(",")// 注意此ids命名是因为后端传参名
        }).then(res => {
          console.log("执行到批量删除后then..")

          this.$message({
            type: 'success',
            message: '删除成功!',
            duration: 1000
          });
          this.fetchData();

        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除',
          duration: 1000
        });
      });
    },

    //添加所用方法：
    openAddDialog() {

      this.title = '创建生产订单';
      this.dialogFormVisible = true;
    }


  },
  // 生命周期钩子函数(vue对象创建完,自动调用该方法)
  created() {
    console.log("created()函数运行")
    this.fetchData()
    console.log("created()函数中查找数据完毕..")
  },

}

</script>

<style scoped lang="scss">

</style>
